<template>
    <div class="headers">
        <div class="header-left">
            <div class="logo">
                <img :src="logoSrc" alt="logo">
            </div>
            <div>
                <p class="MIS-title">自由流后台管理</p>
            </div>

        </div>
        <div class="right-user">
            <el-dropdown trigger="click" @command="handleCommand">
                      <span>
                        {{jv.main.user && jv.main.user.name}}<i class="el-icon-arrow-down el-icon--right"></i>
                      </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="reset" style="padding:0 40px;">修改密码</el-dropdown-item>
                    <el-dropdown-item divided command="logout" style="padding:0 40px;">退出</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>

        <el-dialog
                :append-to-body="true"
                title="输入新密码"
                :visible.sync="dialogVisible"
                width="30%">
            <kv label="输入新密码">
                <el-input v-model="pwd1"></el-input>
            </kv>
            <kv label="确认新密码">
                <el-input v-model="pwd2"></el-input>
            </kv>

            <el-button @click="reset_password_click()" class="to_right">确定</el-button>
        </el-dialog>
    </div>
</template>
<script>

    export default {
        data() {
            return {
                dialogVisible: false,
                pwd1: "",
                pwd2: "",
                blankLogoSrc: require('../assets/logo.png')
            }
        },
        computed: {
            onRoutes() {
                let arr = this.$route.path.split('/');
                return '/' + arr[1];
            },
            logoSrc() {
                return this.blankLogoSrc;
            }
        },
        methods: {
            m_down_click() {
                jv.main.menu(0);
            },
            m_power_click() {
                jv.main.menu(1);
            },
            //退出
            handleCommand(command) {
                if (command === 'logout') {
                    this.$http.post("/open/logout").then(res => {
                        window.location = "/";
                    });
                }
                else if (command == "reset") {
                    this.dialogVisible = true;
                }
            },
            reset_password_click() {
                if (this.pwd1 != this.pwd2) {
                    return jv.error("两次密码不一致!")
                }

                if (this.pwd1.length < 4) {
                    return jv.error("密码至少4位!")
                }

                // this.$http.post("/user/resetMyPassword", {password: this.pwd1}).then(it => {
                //     jv.info("修改密码成功!");
                //     this.dialogVisible = false;
                //     this.pwd1 = "";
                //     this.pwd2 = "";
                // })
            }
        }
    }

</script>
<style scoped lang="scss">
    .headers {
        position: relative;
        box-sizing: border-box;
        width: 100%;
        min-width: 1000px;
        z-index: 1001;
        height: 80px;
        color: #fff;
        background: #3b3a3e;
    }

    .MIS-title {
        padding: 10px;
        height: 60px;
        font-size: 24px;
    }

    .header-left {
        padding: 10px;
    }

    .header-left .logo, .header-left .logo img {
        vertical-align: top;
        width: 60px;
        height: 60px;
        border-radius: 50%;
    }

    .header-left div {
        display: inline-block;
    }

    .header-left .logo-name {
        font-size: 18px;
        margin-left: 10px;
    }

    .header-left .logo-name .admin {
        font-size: 24px;
        margin-top: 14px;

    }

    .header-left .logo-name .company {
        font-size: 18px;
        margin-top: 5px;
    }

    .top-item {
        font-size: 14px;
        color: #ffffff;
        padding: 10px;
        background: #feac00;
        border-radius: 5px;
        margin-left: 30px;
    }

    .to_right {
        text-align: right;
        margin-left: auto;
        display: block;
        margin-right: 10px;
    }

    .right-user {
        position: absolute;
        bottom: 20px;
        right: 20px;
        color: #ffffff;
    }

    .user-operate {
        margin-right: 20px;
        width: 87px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .el-dropdown {
        color: #ffffff;
        font-size: 16px;
    }

    .message-on {
        margin-top: -12px;
    }

    .myMenu {
        width: 200px;
        margin-top: 0;
        padding: 0;
    }

    .myMenu li {
        border-bottom: 1px solid #f6f6f6;
        line-height: 40px;
    }

    .myMenu a {
        color: #00000c;
    }

    .el-dropdown-link {
        font-size: 14px;
    }

    .linkTo .help-center a {
        background: none;
    }
</style>
